<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width" />
		<title>easyui拖拽</title>
		<link href="js-css/easyui.css" rel="stylesheet" />
		<link href="js-css/icon.css" rel="stylesheet" />
		<script src="../../js/jquery.min.js"></script>
		<script src="js-css/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js-css/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>

		<style>
			.toolAreas {
		        width: 280px;
		        height: 500px;
		        display: inline-block;
		        border: 2px solid red;
		        vertical-align: middle;
		        padding-left:5px;
		    }
		    .showAreas {
		        width: 1000px;
		        height: 500px;
		        display: inline-block;
		        border: 2px solid red;
		        vertical-align: middle
		    }
    </style>
	</head>
	<body>

		<div class="toolAreas">
			<div id="Draggable">
				<div>
					<label class="item">姓名</label>
				</div>
				<div>
					<input class="item" name="name" type="text" placeholder="请输入姓名" />
				</div>
				<div>
					<label class="item">年龄</label>
				</div>
				<div>
					<input class="item" name="age" type="text" placeholder="请输入年龄" />
				</div>

				<div class="item" style="height:35px">
					<label style="height:30px">身高</label>
					<input name="h" style="width:100px" />
				</div>

				<div class="easyui-draggable itemB" data-options="handle:'#title'" style="height:35px">
					<label id="title" style="height:30px">性别</label>
					<input name="sex" style="width:100px" />
				</div>


				<input class="itemD" type="text" placeholder="其他" />
			</div>

		</div>

		<form id="form" class="showAreas">
			<div id="Droppable" style="width:100%;height:500px;">

			</div>
		</form>
		<button id="open"> 解除锁定</button>
		<button id="close"> 确认摆放</button>
		<button id="save"> 提交</button>

		<script>
			//创建可拖的控件
			$('.item').draggable({
				revert: true,
				proxy: 'clone',
				onStartDrag: function() {
					$(this).draggable('options').cursor = 'not-allowed';
					$(this).draggable('proxy').css('z-index', 10);
				},
				onStopDrag: function(e) {
					console.log("onStopDrag")
					$(this).draggable('options').cursor = 'move';
				}
			});

			$('.itemD').draggable({
				revert: true,
				proxy: 'clone',
			});


			//创建放置区域
			$('#Droppable').droppable({
				accept: '.item,.itemB,.itemD',
				revert: false,
				onDragLeave: function(e, source) {
					console.log("onDragLeave")
					// $(this).removeClass('over');
					$(this).remove('.item');
					$("#Draggable").append(source);
				},
				onDrop: function(e, source) {
					$(this).append(source)
					//$(this).removeClass('over');
				}
			});

			//锁定按钮

			$("#open").on("click", function() {
				$('.item').draggable('enable')

			})
			$("#close").on("click", function() {

				$('.item').draggable('disable')

			})


			//提交
			$("#save").on("click", function() {

				//获取表单
				var form = $("#form");
				console.log(form.serializeArray());

			})
		</script>
	</body>
</html>
